<template>
	<view class="center">
		<view class="header">
			<image class="avatar" :src="user.avatarUrl" mode="aspectFill" />
			<view class="userInf">
				<view class="userName" @click="toLogin">
					{{user.username||'请先登录'}}
				</view>
				<view class="msgDetail">
					<!-- <Tag type="normal" tag="614社团"></Tag> -->
				</view>
			</view>
			<!-- <van-icon size='60rpx' class="editIcon" name="arrow"  /> -->
			<van-button v-if="user.username" @click="toEdit" class="editIcon" round size="large" icon="arrow"
				type="default" />
		</view>
		<view class="newPost">
			<view class="btn left" @click="newPost">发布帖子</view>
			<view class="btn right" @click="newClub">申请社团</view>
		</view>
		<view class="body">
			<van-tabs v-model:active="active" swipeable color='blue' sticky @change='changeTypeCenter'>
				<van-tab title="我发布的">
					<PostList :ifMine='true' :postData="myPostData" />
				</van-tab>
				<van-tab v-if="user.role=='jyu_admin'" title="待审核的">
					<PostList :ifAudit='true' :postData="auditData" />
				</van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script setup>
	import PostList from '@/pages/index/components/PostsList.vue'
	import Tag from '@/components/Tag.vue'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		useUserStore
	} from '@/store';
	const useUser = useUserStore();
	const user = ref()
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		getPostListByUserId
	} from '@/apis/apis.js'
	onShow(() => {
		user.value = useUser.userInf
		console.log(user.value, '?');
	})
	const myPostData = ref([])
	const auditData = ref([])
	const newPost = () => {
		uni.navigateTo({
			url: '/pages/newPost/newPost'
		})
	}
	const newClub = () => {
		uni.switchTab({
			url: '/pages/club/club'
		})
	}
	const toEdit = () => {
		uni.navigateTo({
			url: '/pages/editUser/editUser'
		})
	}
	const toLogin = () => {
		if (!useUser.token)
			uni.navigateTo({
				url: '/pages/login/login'
			})
	}

	const changeTypeCenter = async (e) => {
		const index = e.detail.index
		switch (index) {
			case 0:
				const res = await getPostListByUserId({
					statu: 'all',
					pageNum: 1,
					pageSize: 10,
				})
				myPostData.value = res.data
				break;
			case 1:
				const resB = await getPostListByUserId({
					statu: 0,
					pageNum: 1,
					pageSize: 10,
				})
				auditData.value = resB.data
				break;
			default:
				break;
		}
	}
</script>

<style lang="less" scoped>
	.center {
		width: 100%;
		background-color: #f6f7f9;
		display: flex;
		flex-direction: column;
		align-items: center;

		.header {
			width: 100%;
			padding: 40rpx;
			position: relative;
			margin-top: 40rpx;
			border-radius: 20rpx;
			background-color: white;
			box-sizing: border-box;
			gap: 20rpx;
			display: flex;
			align-items: center;

			.avatar {
				height: 160rpx;
				width: 160rpx;
				top: -70rpx;
				border-radius: 20rpx;
			}

			.userInf {
				.userName {
					font-size: 40rpx;
					top: 70rpx;
				}

				.msgDetail {
					display: flex;
					margin-top: 5rpx;
					gap: 4rpx;
				}
			}


			.editIcon {
				float: right;
				position: absolute;
				right: 40rpx;
			}
		}


		.newPost {
			height: 200rpx;
			width: 100%;
			margin-top: 10rpx;
			background-color: white;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4%;

			.btn {
				height: 100%;
				width: 48%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40rpx;
				font-weight: 800;
				color: white;

				&.left {
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					background: linear-gradient(311deg, #AFF5FF 11.23%, #4A6FFF 100%);
				}

				&.right {
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					background: linear-gradient(146deg, #C9FF99 0%, #00E3AE 100%);
				}
			}
		}

		.body {
			height: auto;
			padding-bottom: 20rpx;
			border-bottom-left-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			width: 100%;
			margin-top: 10rpx;
			background-color: white;
		}

	}
</style>